<template>
	<view>
		<view class="listBody">
			<view class="item" 
			v-for="(item, index) in list" 
			:key="item.id" 
			:class="{active:!item.expired}"
			>
				<view class="box">
					<view class="top">
						<view class="name u-f-ac line-1">
							<text>{{item.note_title}}</text>
						</view>
						<view class="time">
							<text v-if="item.expired">{{$u.timeFormat(item.sharetime, 'yyyy年mm月dd日 h:M')}}过期</text>
							<text v-if="!item.expired">已过期</text>
						</view>
					</view>
					<view class="bottom u-f-ac u-f-jsb">
						<view class="type u-f-ajc" @click="copy(item.code)" v-if="item.code">
							<text class="typeName">分享码：{{item.code}}</text>
						</view>
						<button class="btn u-f-ajc" plain :disabled="!item.expired" open-type="share" @click="changeShare(index)">
							<text>发给好友</text>
						</button>
					</view>
					
					<view class="delete u-f-ajc" @click="deleteNoteShare(item,index)">
						<u-icon name="trash" size="38rpx" color="#000000"></u-icon>
					</view>
					
				</view>
			</view>
		</view>
		
		<no-data msg="您还未分享任何笔记 !" v-if="!list.length && page!==null"></no-data>
		
	</view>
</template>

<script>
	import noData from './components/no-data'
	
	import { getNoteShareList , deleteNoteShare } from '@/http/api'
	export default {
		// 注册组件
		components:{ noData },
		data() {
			return {
				list:[],
				page:null,
				shareData:{}
			}
		},
		async onLoad() {
			await this.getNoteShareList()
		},
		// 转发
		async onShareAppMessage() {
			return {
			  title: this.shareData.title,
			  path: '/pages/note/share?id='+this.shareData.id,
			  imageUrl:this.shareData.cover
			}
		},
		methods: {
			// 获取我的分享列表
			async getNoteShareList()
			{
				let res = await getNoteShareList();
				this.list = res.data.list
				this.page = res.data.page
			},
			// 删除我的分享记录
			async deleteNoteShare(item,index){
				let status = await uni.showModal({title: '操作提示',content: '是否删除（'+item.note_title+'）此条分享记录？'});
				
				if(status[1].confirm){
					let res = await deleteNoteShare({id:item.id});
					if(res.code==1){
						this.list.splice(index,1)
						uni.showToast({
							title:res.msg,
							icon:'success'
						})
					}else if(res.code!=403){
						uni.showToast({
							title:res.msg,
							icon:'error'
						})
					}
					
				}
			},
			async changeShare(index){
				let item = this.list[index];
				this.copy(item.code)
				this.shareData = {
					title:item.title,
					cover:item.cover,
					id:item.share_id,
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.listBody{
	padding: 30rpx 20rpx;
	.item{
		position: relative;
		margin: 0 auto;
		background: url('')no-repeat center;
		background-size: 100% 301rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		color: white;
		.top{
			.name{
				font-size: 34rpx;
			}
			.time{
				margin-top: 10rpx;
				font-size: 24rpx;
			}
		}
		.bottom{
			position: relative;
			margin-top: 35rpx;
			padding-bottom: 10rpx;
			.btn{
				border: none;
				position: absolute;
				right: 0;
				width: 175rpx;
				height: 60rpx;
				border: none!important;
				font-size: 24rpx;
				border-radius: 80rpx;
				color: #fe7272;
				background-image: linear-gradient(to right, #ffe3e2 , #FFFFFF);
			}
			.type{
				background-color: rgba(255,255,255,0.9);
				opacity: 0.8;
				padding: 10rpx 20rpx;
				border-radius: 0 30rpx;
				.typeName{
					font-size: 24rpx;
					color: #fe7272;
				}
			}
		}
		
		.delete{
			position: absolute;
			right: 30rpx;
			top: 40rpx;
			background-color: white;
			border-radius: 50rpx;
			width: 60rpx;
			height: 60rpx;
			color: #fe7272;
		}
	}
	.active{
		filter: grayscale(100%);
	}
}
</style>

